<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no" />
		<title>速翔网络 - QQ技术：1424445608</title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<style>
			*, body {
				background-color: transparent !important
			}
			#div{
				position: relative;
				width: 106px;
				overflow: hidden;
			}
			#canvas {
				width: 78px;
				border-radius: 50%;
				margin: 10px;
				box-shadow: 0px 0px 20px -10px #222;
				background: #fff !important;
			}
			div {
				position: relative;
			}
			#img,#text,#asd{
				position: absolute;
				top: 20px;
				left: 20px;
				width: 58px;
				border-radius: 50%;
				height:58px;
				z-index: 2;
				background:#fff !important;
				overflow: hidden;
			}
			#img,#text{
				top: 0px;
				left: 0px;
			}
			#img{
			}
			#asd{
				position: absolute;
				z-index: 0
			}
			#text{
				color: #FF4927;
				font-size: 0.8rem;
				z-index: 5;
			 	line-height: 58px;
			 	text-align: center;
			 	font-weight: bold;
			 	left: 60px;
			}
			#text b{
				font-size: 1.2rem;
			}
			#text img{
				width: 15px;
		 		display:inline-block;
				vertical-align:middle;
			}
		</style>
	</head>
	<body>
		<div id="div" Tapmode onclick="_url({title:'阅读收益',url:'jindu_view'},'',true)">
			<div id="asd">
				<img id="img" src="../image/jindu.png" />
				<div id="text"><img src="../image/qh.png" /> + <b>0</b></div>
			</div>
			<canvas id="canvas" width="300" height="300"  ></canvas>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/zepto.min.js"></script>
	<script type="text/javascript" src="../script/ffxiang.js"></script>
	<script>
		var time = 0 ,jindu_time = 1,jindi_id;
		apiready = function() {
			console.log(api.pageParam['aid'])
		//	console.log('开始：'+new Date().getSeconds());
			time = parseInt(_config.yaoqing.money_jindu_time) * 5.8;
			if(!time){
				time = 175;
			}
			api.parseTapmode();
			time = 10 / time;
			// 回到屏幕
			api.addEventListener({
				name : 'viewappear'
			}, function(ret, err) {
				jindu_time = 1;
				clearTimeout(jindi_id)
				jindi_id = setTimeout(function(){
					jindu_time = 0;
				},5000)
			});
			//Window 离开屏幕的事件
			api.addEventListener({
			    name:'viewdisappear'
			}, function(ret, err){
				jindu_time = 0;
			});
			//应用进入后台事件
			api.addEventListener({
				name : 'pause'
			}, function(ret, err) {
				jindu_time = 0;
			});
			// 应用从后台回到前台事件
			api.addEventListener({
				name : 'resume'
			}, function(ret, err) {
				jindu_time = 1;
				clearTimeout(jindi_id)
				jindi_id = setTimeout(function(){
					jindu_time = 0;
				},5000)
			});
		}

		// 0.1  17秒
		// 0.2  9秒
		// 0.3  6秒
		// 0.4  4秒
		window.onload = function() {
			var canvas = document.getElementById('canvas'), //获取canvasLDT素
			context = canvas.getContext('2d'), //获取画图环境，指明为2d
			centerX = canvas.width / 2, //Canvas中心点x轴坐标
			centerY = canvas.height / 2, //Canvas中心点y轴坐标
			rad = Math.PI * 2 / 100//将360度分成100份，那么每一份就是rad度
			speed = 1;
			//加载的快慢就靠它了
			//绘制5像素宽的运动外圈
			function blueCircle(n) {
				context.save();
				context.strokeStyle = "#FF4927";
				//设置描边样式
				context.lineWidth = 55;
				//设置线宽
				context.beginPath();
				//路径开始
				context.arc(centerX, centerY, 100, -Math.PI / 2, -Math.PI / 2 + n * rad, false);
				//用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
				context.stroke();
				//绘制
				context.closePath();
				//路径结束
				context.restore();
			}

			//绘制白色外圈
			function whiteCircle() {
				context.save();
				context.beginPath();
				context.lineWidth = 55;
				//设置线宽
				context.strokeStyle = "#FFF8F7";
				context.arc(centerX, centerY, 100, 0, Math.PI * 2, false);
				context.stroke();
				context.closePath();
				context.restore();
			}

			//百分比文字绘制
			function text(n) {
				context.save();
				//save和restore可以保证样式属性只运用于该段canvasLDT素
				context.strokeStyle = "#fff";
				//设置描边样式
				context.font = "50px Arial";
				//设置字体大小和字体
				//绘制字体，并且指定位置
				context.strokeText(n.toFixed(0) + "%", centerX - 25, centerY + 10);
				context.stroke();
				//执行绘制
				context.restore();
			}

			//动画循环

			( function drawFrame() {
					//console.log(_myDate())
					if (speed > 101) {
						speed = 0
					//	console.log('结束：'+new Date().getSeconds());
//						$("#img").animate({left:"-60px"},1000);
//									$("#text").animate({left:"0px"},1000);

						_ajax('api/yaoqing/daily/type/money_jindu',function(ret,err){
							console.log("money_jindu:"+JSON.stringify(ret)+JSON.stringify(err))
							if(ret){
								if(ret.jinbi){
									var _text = $('#text');
									var _img = $('#img');
									_text.html('<img src="../image/qh.png" /> + <b>'+ret.jinbi+'</b>');
									_img.animate({left:"-60px"},500);
									_text.animate({left:"0px"},500);
									tishi(ret.jinbi)
									setTimeout(function(){
										_img.animate({left:"0px"});
										_text.animate({left:"60px"});
									//	console.log('开始：'+new Date().getSeconds());
										// 弹窗
									//	window.requestAnimationFrame(drawFrame);
									},3000)
								}else{
									$api.setStorage('money_jindu', _myDate());
									setTimeout(function(){
										api.closeFrame();
									},300)
								}
							}else{
								api.closeFrame();
							}
						//	window.requestAnimationFrame(drawFrame);
					},{aid:api.pageParam['aid']})
						return;
					};
					index = window.requestAnimationFrame(drawFrame);
					if(jindu_time){
						context.clearRect(0, 0, canvas.width, canvas.height);
						whiteCircle();
						//   text(speed);
						blueCircle(speed);
						speed += time;
						//  console.log(speed)
					}
				}());
		}
		function kaiguan(a){
			jindu_time = a
			if(a){
				clearTimeout(jindi_id)
				jindi_id = setTimeout(function(){
					jindu_time = 0;
				},5000)
			}
			// console.log("kaiguan:"+a)
		}
		function tishi(jinbi){
			setTimeout(function(){
				cancelAnimationFrame(index);
				api.closeFrame();
			},3000)
			var ret = {"h1":jinbi+"金币","span":"观看文章奖励"+jinbi+"金币<br>已放入你的金币账户"};
			api.openFrame({
				name : 'hongbao',
				url : html_win + 'hongbao.html',
				bounces : false,
				rect : {
					x : 0,
					y : 0,
					w : 'auto',
					h : 'auto'
				},
				useWKWebView : true,
				bgColor : 'rgba(0,0,0,0)',
				pageParam : ret,
				animation : {
					type : "fade", //动画类型（详见动画类型常量）
					subType : "from_bottom", //动画子类型（详见动画子类型常量）
					duration : 300 //动画过渡时间，默认300毫秒
				}
			})
		}
		function quxiao(){
			cancelAnimationFrame(index);

			_close();
		}
	</script>
</html>
